<template>
  <div class="header-nav">
    <div class="header-left">
      <!-- 隐藏图片 -->
      <!-- <img src="~assets/imgHome/header_img.png" alt="" style="width: 50px; height: 50px;margin-left: 10px;" /> -->
      <!-- <img src="~assets/imgHome/header_img_yc.png" alt="" style="width: 50px; height: 50px;margin-left: 10px;" /> -->
      <!-- <img
        src="~assets/imgHome/header_img_dxhd.png"
        alt=""
        style="width: 50px; height: 50px; margin-left: 10px"
      /> -->

      <!-- <img
        src="~assets/imgHome/anchor.png"
        alt=""
        style="width: 35px; height: 35px;margin-left: 10px;border-radius: 50%;"
      /> -->

      <img
        src="~assets/imgHome/login-logo_haerb.png"
        alt=""
        style="width: 35px; height: 35px; margin-left: 10px; border-radius: 50%"
      />
      <!-- <span>亚运智能医疗急救保障系统</span> -->
      <!-- <span>杭州亚残运会智能医疗急救保障系统</span> -->
      <!-- <span>大型活动医疗急救保障系统</span> -->
      <!-- <span>安克赛事活动保障系统</span> -->
      <span>哈尔滨亚冬医疗急救保障系统</span>
    </div>
    <div class="header-center">
      <el-badge :is-dot="false" class="item" @click="handleWarnning">
        <img src="~assets/imgHome/info_warnning.png" alt="" title="告警消息"
      /></el-badge>
    </div>
    <div class="header-center-right">
      <el-dropdown @command="handleCommand" trigger="click">
        <span class="el-dropdown-link">
          <img
            src="~assets/img/user_img.png"
            alt=""
            style="width: 30px; height: 30px; margin-right: 15px"
          />
          <b>{{ workCode }} : {{ userName }}</b>
          <el-icon class="el-icon--right">
            <ArrowDown />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="exit"> 退出系统 </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, toRefs, onBeforeMount, onMounted } from 'vue';
import VueEvent from 'utils/event.js';
import { GetNewsList } from 'network/tipsInfo';
import { ArrowDown } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useStore } from 'vuex';

export default {
  name: '',
  components: { ArrowDown },
  props: [],
  setup() {
    const state = reactive({
      isShowWarnning: ref(true),
      value: ref(''),
      cityOptions: ref([]),
    });
    const store = useStore();
    const userName = computed(() => store.state.app.userInfoVx.Name);
    const workCode = computed(() => store.state.app.userInfoVx.WorkCode);
    // 获取消息列表
    const handleWarnning = () => {
      GetNewsList()
        .then((res) => {
          VueEvent.emit('handleWarnning', {
            isShowWarnning: state.isShowWarnning,
            msgRes: res,
          });
        })
        .catch((error) => {
          throw error;
        });
    };
    const handleCommand = (cmd) => {
      // console.log('cmd', cmd)
      if (cmd == 'exit') {
        ElMessageBox.confirm('确认退出?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            exitClick();
          })
          .catch(() => {
            ElMessage({ type: 'info', message: '取消退出！' });
          });
      }
    };
    const exitClick = () => {
      // console.log(store)
      store.dispatch('app/logout');
    };
    onBeforeMount(() => {});
    onMounted(() => {});
    const refState = toRefs(state);
    return {
      ...refState,
      userName,
      workCode,
      handleWarnning,
      exitClick,
      handleCommand,
    };
  },
};
</script>
<style scoped>
.header-nav {
  display: flex;
}

.header-nav .header-left {
  flex: 2;
  display: flex;
  align-items: center;
  font-size: 26px;
}

.header-nav .header-left span {
  margin-left: 30px;
  line-height: 58px;
  font-size: 18px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}

.header-nav .header-center {
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 0.3;
}

.header-nav .header-center-right {
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 0.5;
}

.header-center-right .el-dropdown-link {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-nav .header-center img {
  cursor: pointer;
}
</style>
